<template>
  <div class="main-content-container">
    <!-- 资料/产品项目/套餐 -->
    <div ref="search" class="app-search">
      <!-- <el-row> -->
      <!-- <el-col :span="4">
        <el-select v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col> -->
      <!-- <el-col>套餐<span style="margin-left:30px">{{ hospitalName }}</span></el-col> -->
      <!-- </el-row> -->
      <el-row>
        <el-col :span="12" class="searchInput">
          <el-input v-model="custQuery" style="width:50%" placeholder="名称、拼音码、编码" clearable class="input-with-select" @change="NameChange">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </el-col>
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button @click="Billing()">+增加套餐</el-button>
        </el-col>
        <el-col class="seleteTions" style="margin-top:12px">
          <el-select v-model="requestInfo.discount" clearable placeholder="请选择折扣" class="el-select-y" @change="dataChange">
            <el-option value="允许" />
            <el-option value="不允许" />
          </el-select>
          <el-select v-model="requestInfo.status" clearable placeholder="请选择状态" class="el-select-y" @change="dataChange">
            <el-option value="上架" />
            <el-option value="下架" />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table :loading="loading" :data="addProjectList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="no" label="编号" :show-overflow-tooltip="true" />
        <el-table-column prop="dataName" label="名称" :show-overflow-tooltip="true" />
        <el-table-column prop="pinyinCode" label="拼音码" :show-overflow-tooltip="true" />
        <el-table-column prop="classifyName" label="分类" :show-overflow-tooltip="true" />
        <el-table-column prop="price" label="套餐价格" :show-overflow-tooltip="true" />
        <el-table-column prop="discount" label="允许折扣下限" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column label="操作" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small">查看</el-button> -->
            <el-button type="text" size="small" @click="editBtn(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="Billing(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <AddSetMeal v-if="billing" ref="billing" :billing-data="billingData" @success="getAddProjectList()" />
    <SetMealDetails v-if="setMealDetails" ref="setMealDetails" :billing-data="billingData" />
  </div>
</template>
<script>
import { tableColor, labelHeigh } from '@/utils/common.js';
import AddSetMeal from "./addSetMeal";
import SetMealDetails from "./setMealDetails";
export default {
  components: {
    AddSetMeal,
    SetMealDetails,
  },
  data() {
    return {
      addProjectList: [],
      options: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      requestInfo: {},
      total: 0,
      tableColor,
      innerHeight: null,
      show: false,
      flag: true,
      loading: false,
      selectValue: '',
      billing: false,
      billingData: {},
      setMealDetails: false,
      hospitalName: localStorage.hospitalName,
      custQuery: "",
    };
  },
  mounted() {
    this.getAddProjectList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getAddProjectList() {
      const requestInfo = JSON.parse(JSON.stringify(this.requestInfo));
      if (!requestInfo.status) requestInfo.status = undefined;
      if (!requestInfo.discount) requestInfo.discount = undefined;
      if (requestInfo.discount === "不允许") requestInfo.discount = "100~101";
      if (requestInfo.discount === "允许") requestInfo.discount = "0~99";
      this.loading = true;
      const res = await this.$api['data/setMeal/setMeal']({ ...this.params, query: { ...requestInfo }, custQuery: this.custQuery });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询套餐列表失败！');
      this.addProjectList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getAddProjectList();
    },
    // 搜索
    searchBtn() {
      this.getAddProjectList();
    },
    // 添加-保存
    handleAdd() {
      this.$refs.addProjects.addBtn();
      this.show = true;
      this.flag = true;
    },
    // 查看详情
    async editBtn(row) {
      const res = await this.$api['data/setMeal/getDetails']({ id: row.id });
      if (res.code !== 200) return;
      this.billingData = res.data;
      this.setMealDetails = true;
      this.$nextTick(() => {
        this.$refs.setMealDetails.init();
      });
    },
    // 删除
    async deleteBtn(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      const res = await this.$api['data/setMeal/deleteCombo']({ id: row.id });
      if (res.code !== 200) return this.$message.error('删除套餐失败！');
      this.$message.success('删除套餐成功！');
      this.getAddProjectList();
    },
    async Billing(val) { // 新增,修改套餐
      this.billingData = {};
      if (val) {
        const res = await this.$api['data/setMeal/getDetails']({ id: val.id });
        if (res.code !== 200) return;
        this.billingData = res.data;
      }
      if (this.billingData.allClassifyId) {
        this.$set(this.billingData, 'classify', this.billingData.allClassifyId.split(","));
      }
      this.billing = true;
      this.$nextTick(() => {
        this.$refs.billing.init();
      });
    },
    dataChange() {
      this.getAddProjectList();
    },
    NameChange(val) {
      if (!val) {
        this.getAddProjectList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box-show{
  margin-top: 12px;
}
</style>
